<template>
  <div>
    <el-container class="out-el">
      <el-header>
        <el-row :gutter="20">
          <!-- logo -->
          <el-col :span="2">
            <div style="height: 120px;" class="grid-content bg-purple">
              <el-image style="width: 120px; height: 120px;" :src="url" :fit="fit"></el-image>
            </div>
          </el-col>
          <!-- 标题 -->
          <el-col :span="12">
            <span style="color: white; font-size: 30px; line-height: 120px;">
              鞋城酒店预订平台 - 后台管理系统
            </span>
          </el-col>
          <!-- 管理员 注销按钮 时间 -->
          <el-col :span="4" :offset="6" style="color: white; font-size: 20px; line-height: 120px;">
            <span>{{nickname}}</span>
            <span @click="logout">注销</span>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 左边菜单 -->
          <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">

            <!-- 一级菜单 -->
            <el-submenu v-for="(menu,i) in menus"
              v-if="menu.prPid == null" :index="i+1">
              <template slot="title">
                <i class="el-icon-s-home"></i>
                <span>{{menu.prName}}</span>
              </template>
              <!-- 子菜单 -->
              <el-menu-item v-for="(menu2,j) in menus"
               v-if="menu2.prPid != null && menu2.prPid == menu.prId"
               :index="(i+1) + '-' + (j+1)" @click="goto(menu2.prFlag)">{{menu2.prName}}</el-menu-item>
            </el-submenu>

            <!-- <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-s-home"></i>
                    <span>酒店管理</span>
                  </template>
                  <el-menu-item index="1-1" @click="goto('/CityManager')">城市管理</el-menu-item>
                  <el-menu-item index="1-2" @click="goto('/HotelManager')">酒店管理</el-menu-item>
                  <el-menu-item index="1-3">客房管理</el-menu-item>
                  <el-menu-item index="1-4">房价管理</el-menu-item>
                </el-submenu>

                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-user-solid"></i>
                    <span>用户管理</span>
                  </template>
                  <el-menu-item index="2-1" @click="goto('/SysUserManager')">后台用户管理</el-menu-item>
                  <el-menu-item index="2-2" @click="goto('/SysRoleManager')">角色管理</el-menu-item>
                  <el-menu-item index="2-3" @click="goto('/SysPowerManager')">权限管理</el-menu-item>
                </el-submenu> -->
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <!-- 工作区的路由出口 -->
            <router-view />
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import jwt from 'jsonwebtoken'

  export default {
    name: 'Home',
    data() {
      return {
        url: require('../assets/img/logo.png'),
        fit: 'cover',
        nickname: '管理员',
        menus: []
      }
    },
    methods: {
      goto(url) {
        this.$router.push(url)
      },
      //注销
      logout() {
        localStorage.removeItem("accessToken");
        localStorage.removeItem("refreshToken");
        //跳转到登录页
        this.$router.push("/");
      },
      //解析登录用户的jwt信息
      getJwtInfo() {
        //获取登录用户的accessToken
        var accessToken = localStorage.getItem("accessToken");
        //判断是否存在登录令牌
        if (!accessToken) {
          this.$router.push("/");
        }
        /*
        {"exp":1634896406,"user_name":"abcdefg","authorities":["/CityManager","ROLE_HOTEL_ADMIN","/RoomPriceManager","/HotelManager","/RoomManager"],"jti":"3abf564f-a55e-47af-a81b-ce9d0d41d547","client_id":"system","scope":["all"]}
        */
        //解析登录令牌，获取当前用户的登录信息
        var jwt = require('jsonwebtoken');
        var user = jwt.decode(accessToken);

        localStorage.setItem("user", JSON.stringify(user));
        //设置登录的用户名
        this.nickname = user.nickname;
      },
      //获取登录用户的菜单列表
      getUserMenu() {
        var vt = this;
        this.utils.myajax({
          type: "GET",
          url: this.utils.myurl.getMenu,
          success: function(data) {
            //设置菜单
            vt.menus = data;
          }
        })
      }
    },
    mounted: function() {
      //解析jwt
      this.getJwtInfo();

      //获取当前用户的菜单列表
      this.getUserMenu();
    }
  }
</script>

<style>
  .el-header {
    min-height: 120px;
    background-color: #42B983;
  }

  .el-aside {
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .out-el {
    height: 800px;
  }
</style>
